
<script setup lang="js">
import {ref} from "vue";
import axios from "axios";
import macros from "../../macros";
import ProgressBar from "../ProgressBar.vue";


var title;//标题

//封面
var cover;
var coverKey;
//下面三个干啥的看七牛云文档
var observables_cover;
var subscriptions_cover;
const observer_cover = {
  next(res){

  },
  error(err){
    alert(err);
    console.log(err);
  },
  complete(res){
    console.log(res);
    coverKey=res.key;
  }
}

var percent=ref(0);

//视频本频
var video;
//下面三个干啥的看七牛云文档
var observables_video;
var subscriptions_video;
const observer_video = {
  next(res){
    percent.value=res.total.percent;
  },
  error(err){
    alert(err);
    console.log(err);
  },
  complete(res){
    console.log(res);
    axios.post(macros.server+"/api/addvideo",{},{params:{title:title,cover:coverKey,video:res.key}})
  }
}

function onCoverChange(){
  cover=document.getElementById("cover").files[0];
}
function onVideoChange(){
  video=document.getElementById("video").files[0];
}

async function upload(){
  var token;
  await axios.get(macros.server+"/api/gettoken")
      .catch(function (error){
        console.log(error);
        alert(error)
      }).then(function (response){
        token=response.data.data;
      });
  observables_cover=qiniu.upload(cover,null,token,{},{region: qiniu.region.z1});
  subscriptions_cover=observables_cover.subscribe(observer_cover);
  observables_video=(qiniu.upload(video,null,token,{},{region: qiniu.region.z1,checkByServer:true,checkByMD5:true}));
  subscriptions_video=(observables_video.subscribe(observer_video));
}
function cancel(){
  subscriptions_cover.unsubscribe();
  subscriptions_video.unsubscribe();
}
</script>

<template>

  <label for="title" class="form-label text-light">标题：</label>
  <input v-model="title" id="title" type="text" class="form-control">
  <label for="cover" class="form-label text-light">封面：</label>
  <input @change="onCoverChange" id="cover" type="file" class="form-control">
  <label for="cover" class="form-label text-light">视频文件：</label>
  <input @change="onVideoChange" id="video" type="file" class="form-control">
  <button @click="upload">上传</button>
  <button @click="cancel">取消</button><br/>
  <ProgressBar :progress="percent"/>

</template>

<style scoped>
</style>